<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Props</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <!-- 根组件的挂载点 -->
    <div class="application"></div>

    <script src="vue.global.js"></script>

    <script>

        // 定义组件
        const show = {
            // 子组件通过 props 来接受由父组件通过 attribute 传递的数据
            props: {
                'id': {
                    type: Number,
                    default: 999
                },
                'name': {
                    type: String,
                    default: 'null'
                },
                'gender': {
                    type: String,
                    required: true
                }
            },
            // 子组件模板
            template: `<div>
                           <span>{{ id }}</span>
                           <span>{{ name }}</span>
                           <span>{{ gender }}</span>
                       </div>`
        }

        const options = {
            // 根组件模板
            template: `<div>
                          <!-- 在父组件中使用子组件时可能通过 attribute 为子组件传递数据 -->
                          <kaifamiao-show :id="id" name="华安" gender="靓仔"></kaifamiao-show>
                          <hr>
                          <kaifamiao-show name="石榴姐" gender="靓妹"></kaifamiao-show>
                       </div>`,
            data(){
                return { id: 9527 }
            },
            // 局部注册组件
            components: {
                'kaifamiao-show': show
            }
        }

        const app = Vue.createApp(options);
        const root = app.mount('.application');
    </script>
    
</body>
</html>